<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>相册列表</title>
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/mainpage.css">
		<link rel="stylesheet" type="text/css" href="css/mainpage_header.css">
		<link rel="stylesheet" type="text/css" href="css/album_list.css">
		<meta name="Description" content="666的博客,心随你动!" />
		<script type="text/javascript">
			function popBox() {
				var popBox = document.getElementById('popBox');
				var popLayer = document.getElementById('popLayer');

				popLayer.style.width = document.body.scrollWidth + "px";
				popLayer.style.height = document.body.scrollHeight + "px";

				popLayer.style.display = "block";
				popBox.style.display = "block";
			}


			function closeBox() {
				var popBox = document.getElementById('popBox');
				var popLayer = document.getElementById('popLayer');

				popLayer.style.display = "none";
				popBox.style.display = "none";

			}
		</script>


	</head>
	<body>
		<div id="wrapper">
			<header>
				<div id="header-text">
					<h1>游呢娃子的博客</h1>
					<div id="signature">这个人很懒，什么都没有说。</div>
				</div>
				<div class="login">
					您好，请 <a href="sign_in.html">登录</a>
				</div>
			</header>
			<nav>
				<ul>
					<li class="first-page"><a href="#">主页</a></li>
					<li><a href="#">日志</a></li>
					<li><a href="#">相册</a></li>
					<li><a href="#">留言板</a></li>
					<li><a href="#">我的访客</a></li>
					<input type="text" id="search" value="文章搜索..." onfocus="if (value =='文章搜索...'){value =''}" onblur="if (value ==''){value='文章搜索...'}">
					<button type="button"></button>
				</ul>

			</nav>
			<div id="container">
				<div class="flytext">
					<img src="img/widespread.png" />
					<marquee behavior="scroll" direction="left">
						这是用来测试的无意义的一句话啦啦啦。
					</marquee>
				</div>
				<div class="album-collection">
					<div class="title">
						<span>相册列表</span>
					</div>
					<button type="button" class="add-album" onclick="popBox()">
						<span>创建相册</span>
					</button>
					<ul class="album-list">
						<li class="single-album-inf" id="single-album-inf-0">
							<a href="#">
								<img class="single-photo" src="img/lengtu2.jfif" width="150" height="150">
							</a>
							<div class="photo-description">冷兔宝宝相册</div>
						</li>
					</ul>
					<!-- 换页 -->
					<div class="pagi">
						<ul class="pagination">
							<li><a href="#">«</a></li>
							<li><a href="#" class="active">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">»</a></li>
						</ul>
					</div>
				</div>


			</div>
			<footer>&copy;2019-2030 啦啦啦</footer>
		</div>
		<div id="popLayer">
		</div>

		<div id="popBox">
			<div class="close"><a href="javascript:void(0)" onclick="closeBox()"><img src="img/close-popbox.png"></a></div>
			<div class="input-area">
				<label for="album-name" class="album-name-label"> 相册名称： </label>
				<input class="textareas" id="album-name" name="album-name" required="required" type="text" />
				<button type="button" id="create-album" >创建相册</button>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var sourceNode = document.getElementById("single-album-inf-0");
		for (var i = 1; i < 10; i++) {
			var clonedNode = sourceNode.cloneNode(true);
			clonedNode.setAttribute("id", "single-album-inf-" + i);
			sourceNode.parentNode.appendChild(clonedNode);
		}
	</script>
</html>
